import { Options, Vue } from 'vue-class-component';
import { Grid } from '@/widghts/run-rule/grid/grid';
import { ToolBar } from '@/widghts/run-rule/toolbar/toolbar';
import { SearchForm } from '@/widghts/run-rule/searchform/searchform';
import RunRuleEditView from '@/pages/run-rule-edit-view/run-rule-edit-view';
import { Subject } from 'rxjs';
import './run-rule-grid-view.less';

@Options({
    components: {
        'app-grid': Grid,
        'app-toolbar': ToolBar,
        'app-searchform': SearchForm,
        'run-rule-edit-view': RunRuleEditView,
    },
})
export default class RunRuleGridView extends Vue {
    /**
     * 视图通讯对象
     *
     * @type {Subject<ViewState>}
     * @memberof RunRuleGridView
     */
    public viewState: Subject<ViewState> = new Subject();

    /**
     * 编辑视图显示状态
     *
     * @type {boolean}
     * @memberof RunRuleGridView
     */
    visible: boolean = false;

    /**
     * 搜索表单显示状态
     *
     * @type {boolean}
     * @memberof RunRuleGridView
     */
    searchFormVisible: boolean = false;

    /**
     * 视图参数
     *
     * @type {*}
     * @memberof RunRuleGridView
     */
    viewparams: any = {};

    /**
     * 数据上下文
     *
     * @type {*}
     * @memberof RunRuleGridView
     */
    context: any = {};

    /**
     * 工具栏模型对象
     *
     * @type {any[]}
     * @memberof RunRuleGridView
     */
    toolbarModel: any[] = [
        {
            action: 'create',
            text: '新建',
            type: 'primary',
        },
    ];

    /**
     * 编辑视图飘窗关闭函数
     *
     * @memberof RunRuleGridView
     */
    onClose() {
        this.visible = false;
    }

    /**
     * 工具栏项单机触发
     *
     * @param {*} item
     * @memberof DataSource
     */
    toolbarItemClick(item: any) {
        if (item.action === 'create') {
            Object.assign(this.context, { id: '' });
            this.openEditView();
        } else if (item.action === 'searchFormState') {
            this.searchFormVisible = item.data;
        }
    }

    /**
     * 表格行双击事件
     *
     * @param {*} data
     * @memberof RunRuleGridView
     */
    gridRowDblclick(data: any) {
        if (data) {
            Object.assign(this.context, { id: data.id });
            this.openEditView();
        }
    }

    /**
     * 搜索
     *
     * @memberof DataSourceGridView
     */
    search(formData: any) {
        this.viewState.next({ tag: 'grid', action: 'refresh', data: formData });
    }

    /**
     * 绘制函数
     *
     * @return {*} 
     * @memberof RunRuleGridView
     */
    render() {
        return (
            <div class='run-rule-grid-view'>
                <div class='title'>
                    <span>{this.$route.meta.caption}</span>
                </div>
                <app-toolbar isFilter={true} toolbarModel={this.toolbarModel} onToolbarItemClick={this.toolbarItemClick}></app-toolbar>
                {this.searchFormVisible ? (
                    <app-searchform ref='searchform' onSearch={this.search}></app-searchform>
                ) : null}
                <app-grid ref='grid' viewState={this.viewState} onRowDblClick={this.gridRowDblclick}></app-grid>
                {this.renderEditView()}
            </div>
        );
    }

    /**
     * 打开编辑视图
     *
     * @memberof RunRuleGridView
     */
    openEditView() {
        this.visible = true;
    }

    /**
     * 编辑视图数据发生变更
     *
     * @memberof RunRuleGridView
     */
    onDataChange() {
        this.viewState.next({ tag: 'grid', action: 'refresh' });
    }

    /**
     * 绘制编辑视图
     *
     * @memberof RunRuleGridView
     */
    renderEditView() {
        return (
            <a-drawer
                onClose={this.onClose}
                visible={this.visible}
                class={['custom-class']}
                title='新建数据源'
                width={1000}
                placement='right'
            >
                {this.visible ? (
                    <run-rule-edit-view context={this.context} onDataChange={this.onDataChange}></run-rule-edit-view>
                ) : null}
            </a-drawer>
        );
    }
}
